<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal">
        <div :class="advanced ? null: 'fold'">
          <a-row >
            <a-col :md="12" :sm="24" >
            <a-form-item
              label="事件筛选"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
               <a-select default-value="全部事件" style="width:100%" @change="handleChange">
                <a-select-option v-for="item in selData" :value="item.key">
                  {{item.name}}
                </a-select-option>
                </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24" >
            <a-form-item
              label="区间时间"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 18, offset: 1}"
            >
              <a-range-picker @change="onChange" />
            </a-form-item>
          </a-col>
        </a-row>
        </div>
        <span style="float: right; margin-top: 3px;">
          <a-button type="primary">查询</a-button>
          <a-button style="margin-left: 8px">重置</a-button>
        </span>
      </a-form>
    </div>
    <div>
      <standard-table
        :columns="columns"
        :dataSource="dataSource">
        <div slot="action" slot-scope="{text, record}">
          <a-button type="link" @click="seeMessage(record)">查看原始报文</a-button>
        </div>
      </standard-table>
    </div>

    <a-modal class="fd-eventLoggs-modal" v-model="visible" title="原始报文" ok-text="确认" cancel-text="取消" @ok="hideModal">
      <standard-table
        :columns="msgColums"
        :dataSource="msgData"
        :pagination="false">
      </standard-table>

      <detail-list class="fd-eventLoggs-modal-list" title="返回参数原始报文">
        <a-textarea width="100%" placeholder="原始报文" aria-readonly="true" :rows="5" />
      </detail-list>
    </a-modal>
  </a-card>
</template>

<script>
import StandardTable from '@/components/table/StandardTable'
import DetailList from '@/components/tool/DetailList'
import {getEventList} from '@/services/device'
const DetailListItem = DetailList.Item
const columns = [
  {
    title: '事件名称',
    dataIndex: 'no'
  },
  {
    title: '数据标识',
    dataIndex: 'description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '触发时间',
    dataIndex: 'updatedAt',
    sorter: true
  },
  {
    title: '返回参数',
    dataIndex: 'creator',
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

const dataSource = []

for (let i = 0; i < 100; i++) {
  dataSource.push({
    key: i,
    no: 'NO ' + i,
    description: '这是一段描述',
    callNo: Math.floor(Math.random() * 1000),
    status: Math.floor(Math.random() * 10) % 4,
    updatedAt: '2018-07-26',
    creator: 'admin'
  })
}

export default {
  name: 'eventLogs',
  components: {StandardTable,DetailList,DetailListItem},
  data () {
    return {
      visible:false,
      advanced: false,
      columns: columns,
      dataSource: dataSource,
      selData: [
        {
          name: '全部事件',
          key: '01'
        },{
          name: '设备上报事件',
          key: '02'
        },{
          name: '指令下发事件',
          key: '03'
        },{
          name: '设备间通信事件',
          key: '04'
        }
      ],
      msgColums: [],
      msgData: []
    }
  },
  created() {
    getEventList().then( res => {
      console.info(res);
    })
  },
  methods: {
    hideModal() {

    },
    onChange(date, dateString) {
      console.log(date, dateString);
    },
    seeMessage(record) {
      console.info(record)
      const that = this;
      that.msgColums = [
        {
          title: '事件名称',
          dataIndex: 'no'
        },
        {
          title: '数据标识',
          dataIndex: 'description',
          scopedSlots: { customRender: 'description' }
        },
        {
          title: '触发时间',
          dataIndex: 'updatedAt',
          sorter: false
        }
      ]
      that.msgData = [record]
      that.visible = true;
    },
    handleChange() {

    }
  }
}
</script>

<style lang="less" scoped>
  .fd-eventLoggs-modal /deep/ .ant-modal-title {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }
  .fd-eventLoggs-modal /deep/ .ant-modal-title::before {
    background: #0182FE;
    color: #0182FE;
    margin-right: 5px;
    content: "|";
    font-size: 12px;
  }
  .fd-eventLoggs-modal .fd-eventLoggs-modal-list /deep/ .title {
    margin-top: 40px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #333333;
  }
  .search{
    margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  .tabs-uhn{
    width: 70%;
    text-align: center;
    padding:12px 0px;
    box-shadow: 3px 3px 3px#E7EAED;
    border-radius: 9px;
    background-color: #F2F2F2;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
